<template>
	<u-popu :safe-area-inset-bottom="safe"  :scrolls="scrolls" :value="sku_opne" @close="popuClose" :scroll="false" mode="bottom" border-radius="50" :height="safe?(320 + safeArea) + 'px':'320px'">
		<view class="commodity-sku" :style="{height:safe?`${(320 + safeArea)}px`:'320px',paddingBottom:safeArea? safeArea+ 'px':'10px'}">
			<view class="commodity-up">
				<view class="commodity-left">
					<u-image radius="10" :src="sku_view[0]" width="100%" height="180rpx"></u-image>
				</view>
				<!-- :class="sku_info.stock?'show':''" -->
				<view class="commodity-right show">
					<view class="commodity-flex">
						<view class="commodity-name u-line-1">{{sku_data.name ||sku_obj.name}}</view>
						<view class="commodity-close" @click="sku_opne=false">
							<u-icon name="close" color="#666" size="20"></u-icon>
						</view>
					</view>
					<view class="commodity-info" :class="!sku_info.stock?'show':''">
						<view class="commodity-pacie">{{sku_info.price||sku_obj.price}}</view>
						<view class="commodity-ogprice">￥{{sku_info.og_price||sku_obj.og_price}}</view>
					</view>
					<view class="commodity-inventory">库存：{{sku_info.stock||sku_obj.stock}}</view>
				</view>
			</view>
			<view class="commodity-select">
				<template v-if="sku_list.length">
					<view class="select-totie">规格</view>
					<view class="select-menu">
						<scroll-view scroll-x class="scroll-menu">
							<view class="sku-list">
								<button class="cu-btn sku-item" :class="index==current?'show':''" v-for="(item,index) in sku_list"
									:key="index" @click="skuEvnet(index)">{{item.name}}</button>
							</view>
						</scroll-view>
					</view>
				</template>
			</view>
			<view class="commodity-alignment">
				<view class="alignment-totie">选数量</view>
				<view class="alignment-right">
					<view class="alignment-add" @click="numberChange('reduce')">
						<view class="alignment-icon">
							<u-icon name="minus" color="#999" size="18"></u-icon>
						</view>
					</view>
					<view class="alignment-num">{{commod_num}}</view>
					<view class="alignment-add" @click="numberChange('add')">
						<view class="alignment-icon">
							<u-icon name="plus" color="#FFCF4F" size="18"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="commodity-operate">
				<button class="cu-btn operate-button show" @click="comdityEvent('add')">加入购物车</button>
				<button class="cu-btn operate-button" @click="comdityEvent('place')">立即下单</button>
			</view>
		</view>
	</u-popu>
</template>

<script>
	export default {
		name: "commodity-sku",
		props:{
			scrolls:{
				type:Boolean,
				default:true
			},
			show:{
				type:Boolean,
				default:false
			},
			safe:{
				type:Boolean,
				default:false
			},
			sku_data:{
				type:Object,
				default:(()=>{
					return {}
				})
			}
		},
		data() {
			return {
				sku_opne: false,
				current:0,
				commod_num:1,
				
			};
		},
		computed:{
			sku_list(){
				return this.sku_data.sku_price || []
			},
			sku_obj(){
				return this.sku_data || {}
			},
			sku_info(){
				return this.sku_list[this.current] || {}
			},
			sku_view(){
				return this.sku_obj.img || []
			}
		},
		methods:{
			skuEvnet(e){
				if(e == this.current)return
				if(!this.sku_list[e].stock){
					this.$u.toast('该规格已售罄')
					return
				}
				this.current =e
				if(this.commod_num >=this.sku_info.stock ){
					this.commod_num = this.sku_info.stock
					this.$u.toast('已同步库存数量')
					return
				}
			},
			comdityEvent(e){
				if(!this.vuex_token){
					this.multiRedirect('/subpkg/login/login')
					return
				}
				let obj = {
					goods_id:this.sku_obj.id,
					sku_id:this.sku_list.length ? this.sku_info.id:this.sku_obj.sku_id,
					num:this.commod_num,
					channel:''
				}
				if(e == 'add'){
					this.showLoding()
					this.$network('/api/goods/cartAdd',{
						goods_info:[{
							'goods_id':obj.goods_id,
							'sku_id':obj.sku_id,
							'num':obj.num,
							'c_num':0
						}]
					}).then(res=>{
						if(res.code == 1){
							this.showhideloding()
							this.$u.vuex('card_show',true)
							this.$u.toast('添加购物车成功')
						}
					})
				}else{
					this.multiRedirect('/subpkg/confirmorder/confirmorder?obj=' + JSON.stringify(obj))
				}
				this.sku_opne =!this.sku_opne
			},
			open(){
				this.sku_opne = true
			},
			close(){
				this.sku_opne = false
			},
			popuClose(){
				this.sku_opne = false
				this.$emit('close')
			},
			numberChange(e){
				if(e=='reduce'){
					if(this.commod_num<2)return
					this.commod_num--
				}else{
					if(Object.keys(this.sku_info).length != 0){
						if(this.commod_num >=this.sku_info.stock){
							this.$u.toast('已超出库存')
							return
						}
					}
					this.commod_num++
				}
			},
		},
		watch: {
			show: {
				handler(newVal, oldVal) {
					this.sku_opne = newVal
					this.commod_num = 1
					this.current = 0
				}
			}
		}
	}
</script>

<style lang="scss">
	.commodity-operate {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20px;
		height: 60px;

		.operate-button {
			width: 50%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			margin: 0;
			background-color: #FFCF4F;
			color: #333;
			font-size: 28rpx;
			border-radius: 0 24px 24px 0;

			&.show {
				border-radius: 24px 0 0 24px;
				background-color: #ffd460;
				color: #333;
			}
		}
	}

	.commodity-alignment {
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.alignment-right {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 200rpx;
			height: 55rpx;
			border: 1px solid #ECECEC;

			.alignment-num {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				border-left: 1px solid #ECECEC;
				border-right: 1px solid #ECECEC;
				font-size: 28rpx;
				color: #333;
			}

			.alignment-add {
				width: 25%;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}
		}

		.alignment-totie {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			margin: 20rpx 0 0;
		}
	}

	.sku-list {
		display: flex;
		align-items: center;

		.sku-item {
			min-width: 140rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ececec;
			padding: 0 15rpx;
			margin: 0 20rpx 0 0;
			font-size: 25rpx;
			color: #333;
			border-radius: 5px;

			&.show {
				background-color: #FFCF4F;
				color: #333;
			}
		}
	}

	.commodity-select {
		height: 55px;
		display: flex;
		flex-direction: column;

		.select-totie {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 10px;

			.select-menu {
				.scroll-menu {
					white-space: nowrap;
				}
			}
		}
	}

	.commodity-sku {
		width: 100%;
		height: 320px;
		padding: 15px 15px 10px 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.commodity-up {
			display: flex;
			align-items: initial;
			justify-content: space-between;
			height: 90px;

			.commodity-left {
				width: 30%;

			}
			.commodity-inventory{
				font-size: 28rpx;
				color: #999;
			}
			.commodity-right {
				width: 67%;
				&.show{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
				.commodity-info {
					display: flex;
					align-items: center;
					&.show{
						margin-top: 20rpx;
					}
					.commodity-pacie {
						font-size: 35rpx;
						color: red;
						position: relative;
						margin-left: 10px;
						font-weight: bold;
					}

					.commodity-pacie::after {
						position: absolute;
						left: -12px;
						content: "￥";
						top: 4px;
						font-size: 25rpx;
						font-weight: bold;
						color: red;
					}

					.commodity-ogprice {
						color: #999;
						font-size: 28rpx;
						text-decoration: line-through;
						margin-left: 15rpx;
					}
				}

				.commodity-flex {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.commodity-name {
						max-width: 600rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
					}
				}
			}
		}
	}
</style>
